<template>
  <div class="wrap">
    <div class="stepset">
      <div class="color333 font18 mb30">
        事件判断
      </div>
    </div>
    <!-- 事件选择 -->
    <el-form :model="ruleForm" size="mini" ref="ruleForm" class="mb60">
      <!-- 事件类型 -->
      <el-form-item prop="eventType" class="w178">
        <span class="color333 font16 ml12">事件类型：</span>
        <span class="color333 font16">{{getEventTypeName(ruleForm.eventType)}}</span>
      </el-form-item>

      <!-- 具体事件 -->
      <el-form-item   prop="eventCode" class="w178">
        <span class="color333 font16 ml44">事件：</span>
        <span class="color333 font16">{{getEventName(ruleForm.eventCode)}}</span>
      </el-form-item>


      <!-- 消费事件---优惠券核销部分 -->
      <div class="form-wrap"  v-if="ruleForm.eventType == 2 && ruleForm.eventCode == 'coupons_verification'">
        <span class="lebel">
          <span class="redColor">*</span>
          <span class="value color333">事件条件：</span>
        </span>
        <div class="form">
          <el-form :model="item" size="mini" ref="itemFrom" class="mb60 commonForm" v-for="(item,index) in formDataList" :key="index" >
            <i v-if="index != 0" class="el-icon-close delete" @click=deleteForm(item)></i>
            <el-row class="mb20">
              <el-form-item :label="'事件条件' + (index + 1) + '：'" prop="eventName" class="special" label-width="100px">
                <span class="color333 font16">{{item.eventName}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="时间条件：" prop="eventRangeTime" class="special" label-width="100px">
                <span class="color333 font16" v-if="item.eventRangeTime">{{getEventRangeTime(item.eventRangeTime)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="优惠券活动：" prop="promName" class="special" label-width="100px">
                <span class="color333 font16">{{getPromName(item.promCode)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="核销渠道：" prop="verificationChannels" class="special" label-width="100px">
                <span class="color333 font16">{{getVerificationChannels(item.verificationChannels)}}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>


      <!-- 消费事件---红包核销部分 -->
      <div class="form-wrap"  v-if="ruleForm.eventType == 2 && ruleForm.eventCode == 'redEnvelope_verification'">
        <span class="lebel">
          <span class="redColor">*</span>
          <span class="value color333">事件条件：</span>
        </span>

        <div class="form">
          <el-form :model="item" size="mini" ref="itemFrom" class="mb60 commonForm" v-for="(item,index) in formDataList" :key="index" >
            <i v-if="index != 0" class="el-icon-close delete" @click=deleteForm(item)></i>
            <el-row class="mb20">
              <el-form-item :label="'事件条件' + (index + 1) + '：'" prop="eventName" class="special" label-width="100px">
                <span class="color333 font16">{{item.eventName}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="时间条件：" prop="eventRangeTime" class="special" label-width="100px">
                <span class="color333 font16" v-if="item.eventRangeTime">{{getEventRangeTime(item.eventRangeTime)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="红包活动：" prop="promName" class="special" label-width="100px">
                <span class="color333 font16">{{getPromName(item.promCode)}}</span>
              </el-form-item>
            </el-row>
            <el-row  class="mb20">
              <el-form-item label="核销渠道：" prop="verificationChannels" class="special" label-width="100px">
                <span class="color333 font16">{{getVerificationChannels(item.verificationChannels)}}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>



    </el-form>

    <!-- 取消 确定按钮 -->
    <div class="t_c">
      <el-button type="primary" size="small" @click="handleClose()">取消</el-button>
      <el-button size="small" @click="handleClose()" type="primary">确定</el-button>
    </div>

  </div>
</template>

<script>
  import {eventList, levelList, activeStatus, channelStatus, pointsExchangeContents, getEventCodeListByType, checkRemoveJsonProperties } from '../event/crmEventSelection'
  import { formatDate2 } from "@/utils/datetime";
  // 自动化营销-----事件选择组件
  export default {
    name: 'eventSelectionInfo',
    components: {

    },

    props: {
      journeyId: {
        type: String,
        default: '',
      },
      id:Number,
      nodeInfo: {
        type: Object,
      }
    },

    data() {
      return {
        //旅程开始结束时间
        tripStart: null,
        tripEnd: '2037-06-26 10:10:20',
        //保存当前校验表单值
        currentNodeForm: {},
        currentNodeIndex: null,
        loadPromsing: false,
        // 表单数据
        ruleForm: {
          eventType: null,
          eventCode: null,
        },
        eventList: eventList,
        eventCodeList: [],               // 具体事件下拉数据，根据选择的事件类型来确定
        // 升级级数数据
        levelList: levelList,
        // 升降级所有表单数据
        formDataList: this.getDefalutItemFrom(),
        // 优惠券（红包）活动状态下拉框数据
        activeStatus: [],
        // 核销渠道数据
        channelStatus: channelStatus,
        //积分兑换内容
        pointsExchangeContents: pointsExchangeContents,
        tripInfo: {},
        poupons:[],
      }
    },

    methods: {
      //节点配置表单初始化
      getDefalutItemFrom(){
        return [
          {
            eventName: null,                    // 事件条件
            eventRangeTime: [],                         // 时间条件
            memberNum: null,                 // 会员事件-级别数
            promCode: null,         // 优惠券红包核销事件-优惠券红包活动code
            promName: null,         // 优惠券红包核销事件-优惠券红包活动name
            verificationChannels: null,         // 优惠券红包核销事件-优惠券红包活动核销渠道
            pointsExchangeContent: null,         // 积分兑换内容
            pointsExchangeNum: null,          // 积分兑换次数

            pointsCashInAmount:{
              f: null,
              s: null
            },
            pointsCashInNum: null,
          }
        ];
      },

      getEventTypeName(eventType){
        let item = eventList.find(function (item, index) {
          return item.type == eventType;
        })
        return typeof(item)=="undefined" ? "" : item.tagName;
      },

      getEventName(eventCode){
        let item =  this.eventCodeList.find(function (item, index) {
          return item.id == eventCode;
        })
        return typeof(item)=="undefined" ? "" : item.tagName;
      },

      getEventRangeTime(eventRangeTime){
        let eventRangeTimeDesc = '';
        if(eventRangeTime){
         if(eventRangeTime[0]){
           eventRangeTimeDesc = formatDate2(new Date(eventRangeTime[0])) + "~" + formatDate2(new Date(eventRangeTime[1]))
         }
        }
        return eventRangeTimeDesc;
      },

      getPromName(promCode){
        let item = this.poupons.find(function (item, index) {
          return item.promotionId == promCode
        })
        return typeof(item)=="undefined" ? "" : item.promName ;
      },


      getMemberNum(memberNum){
        let item = levelList.find(function (item, index) {
          return item.id == memberNum;
        })
        return typeof(item)=="undefined" ? "" : item.tagName;
      },

      getVerificationChannels(verificationChannels){
        let item = channelStatus.find(function (item, index) {
          return item.id == verificationChannels;
        })
        return typeof(item)=="undefined" ? "" : item.tagName;
      },

      getPointsExchangeContent(pointsExchangeContent){
        let item = pointsExchangeContents.find(function (item, index) {
          return item.code == pointsExchangeContent;
        })
        return typeof(item)=="undefined" ? "" : item.tagName;
      },


      //获取节点详情
      getBranchNodeDetail(){
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.ruleForm.eventType = res.data.eventType == 0 ? null : res.data.eventType;
            this_.eventCodeList = getEventCodeListByType(this_.ruleForm.eventType);
            this_.ruleForm.eventCode =  res.data.eventCode == 0 ? null : res.data.eventCode;
            let nodeVariable = JSON.parse(res.data.nodeVariable);
            if(nodeVariable){
              this_.formDataList = nodeVariable.map((ele, index) => {
                let itemForm = JSON.parse(JSON.stringify(ele));
                itemForm.eventRangeTime = [];
                if(ele.eventRangeTime){
                  itemForm.eventRangeTime[0] = ele.eventRangeTime.f;
                  itemForm.eventRangeTime[1] = ele.eventRangeTime.s;
                }

                let callback = function(res1) {
                  this_.poupons.push(res1.data);
                };

                if(itemForm.promCode){
                  this_.utils.request.couponQueryConfigByPromotionId({"promotionId": itemForm.promCode}, callback)
                }
                return itemForm;
              });
            }
          }
        };
        let param = {"branchNodeId": this.nodeInfo.nodeId};
        this.utils.request.getBranchNodeDetail(param, callback);
      },

      //子关闭 标签选择弹框
      handleClose() {
        this.$emit("handleClose", false);
      },


      //获取优惠券红包列表
      getCouponList(){
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.activeStatus = res.data.rows;
          } else {
            //alert("修改失败");
          }
        };
        if(this.ruleForm.eventCode){
          let promType = this.ruleForm.eventCode == 'coupons_verification' ?  11 : 12;
          let param = {
            promType: promType,
            limit: 1000000,
            start: 1,
          };
          this.utils.request.getCouponList(param, callback);
        }
      },
    },

    created(){

    },

    mounted() {
      this.getBranchNodeDetail();
    },
  }
</script>
<style lang="scss" scoped>
  .desc{
    color: #ffb100;
    font-size: 10px;
    margin-top: 10px;
  }

  /deep/ .el-form-item__error{
    width: 500px;
  }

  .inLine{
    margin-top: 5px;
  }

  .redColor{
    color:#F00;
    height: 18px;
    line-height: 24px;
    display: inline-block;
    vertical-align: middle;
  }
  .value {
    display: inline-block;
    vertical-align: middle;
    height: 18px;
    line-height: 18px;
  }

  .wrap {
    padding: 0 30px;
    text-align:center;
    /* 表单样式 */
    .form-wrap {
      overflow: hidden;
      width: 100%;
      padding: 20px 0;
      .lebel {
        float: left;
        text-align: right;
        color: #999999;
        font-size: 16px;
      }
      .form {
        float: left;
        border: 1px solid #DCDFE6 !important;
        padding: 0 20px 20px 20px;
        margin-left: 2px;
        width: 80%;
      }
      .commonForm {
        position: relative;
        .delete {
          position: absolute;
          right: 0;
          top: 0;
          font-size: 22px;
          cursor: pointer;
          z-index: 999;
        }
      }
      .addForm {
        color: green;
      }
    }
  }

    /* 特殊样式部分 */ 
  .special /deep/ .el-form-item__content {
    height: 32px;
    line-height: 32px;
    margin-left: 0px !important;
  }
</style>

